
<template>
    <div>
      <div>
        <div class="flex gap-3">
            <el-input placeholder="查询内容" v-model="query"></el-input>
            <el-button @click="doQuery">确认</el-button>
        <UButton @click="() => { addNew = !addNew }">新增</UButton>

        </div>
      </div>

        <UTable loading :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
            :progress="{ color: 'primary', animation: 'carousel' }" v-if="tableData" :rows="tableData" :columns="columns">
            <template #actions-data="{ row }">
                <!-- <span class=" hover:cursor-pointer">{{ row.actions }}</span> -->
                <UDropdown :items="items(row)">
                    <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
                </UDropdown>
            </template>
        </UTable>
      <UModal v-model="addNew">
        <UCard>
          <template #header>
            <div class="h-8">
              <h1 class="text-lg font-bold">新增</h1>
            </div>
          </template>
          <div class=" flex flex-col gap-9">
            <el-form>
              <el-form-item label="内容">
                <el-input v-model="item.content" />
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="item.reserve_1" />
              </el-form-item>

              <el-form-item >
                <el-button type="primary" @click="addOne">提交</el-button>
              </el-form-item>

            </el-form>
          </div>
        </UCard>
      </UModal>

      <UModal v-model="isOpen">
            <UCard>
                <template #header>
                    <div class="h-8">
                        <h1 class="text-lg font-bold">修改信息</h1>
                    </div>
                </template>
                <div class=" flex flex-col gap-9">
                    <div><span class=" text-2xl">内容</span>
                        <UInput v-model="item.content" />
                    </div>
                    <div><span class=" text-2xl">标题</span>
                        <UInput v-model="item.reserve_1" />
                    </div>
                    <div><span class=" text-2xl">其他</span>
                        <UInput v-model="item.reserve_2" />
                    </div>
                    <div class="flex gap-2">
                        <UButton @click="() => { updateOne() }">
                            确认
                        </UButton>
                        <UButton color="white" @click="isOpen = false">
                            取消
                        </UButton>
                    </div>
                </div>
            </UCard>
        </UModal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const toast = useToast()
let item = reactive({
    id: '', content: '', created_time: '', reserve_1: '', reserve_2: '',
})
let tableData = ref([])
const query = ref('')
function fuzzySearch(query, target) {
    return target.toLowerCase().includes(query.toLowerCase());
}
let _tableData =ref([])
const doQuery = ()=>{
 if(query.value!==''){
    let out = tableData.value.filter(item=>{
    let content = JSON.stringify(item)
    return fuzzySearch(query.value,content)
 })
 tableData.value = out
}else{
    tableData.value = _tableData.value
}
}

let isOpen = ref(false)
let addNew = ref(false)
function addOne() {
  let payload = {
    content: item.content,
    reserve_1: item.reserve_1,
  }
  axios.post('http://localhost:8000/news/add_one', payload).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '新增失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '新增成功',
                // description: resp.msg,
            })
            getAll()
            addNew.value = false
        }
    })
}
function getAll() {
    axios.post('http://localhost:8000/news/get_one', {}).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            console.log(resp)
        } else {
            tableData.value = resp.data
            _tableData.value = resp.data
        }
    })
}
function deleteOne(item) {
    axios.post('http://localhost:8000/news/delete_one', item).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除成功',
                // description: resp.msg,
            })
            getAll()
        }
    })
}
function updateOne() {
    item.id = item.id
    axios.post('http://localhost:8000/news/update_one', { 'cond': { 'id': item.id }, 'item': item }).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新成功',
                // description: resp.msg,
            })
            getAll()
            isOpen.value = false
        }
    })
}
getAll()

const columns = [
    { 'key': 'id', 'label': 'id' }, { 'key': 'content', 'label': '内容' }, { 'key': 'created_time', 'label': '创建时间' },
  { 'key': 'reserve_1', 'label': '标题' }, { 'key': 'reserve_2', 'label': '其他' },
    { 'key': 'actions', 'label': '操作' },
]

const items = (row) => [
    [{
        label: 'Edit',
        icon: 'i-heroicons-pencil-square-20-solid',
        click: () => {
            isOpen.value = true
            console.log(row)
            item.id = row.id
            item.id = row.id; item.content = row.content; item.created_time = row.created_time; item.reserve_1 = row.reserve_1; item.reserve_2 = row.reserve_2;
        }
    }, {
        label: 'Delete',
        icon: 'i-heroicons-trash-20-solid',
        click: () => { deleteOne(row) }
    }]
]

</script> 

<style scoped>.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}</style>

